Skip to main content

Data Dependency Viewer

When you encounter a new app, or need to make changes to an app – understanding how data flows through the app is critical. Consider the following questions:

  • If I make a change to this drop-down field, what other components might be affected?
  • Where is the data to fill this drop-down field sourced from?
  • If I need to change this piece of data, what components might be affected?

The Data Dependency Viewer is functionality to help answer these questions.

Exposing Components that Depend on a Data Path​

This example shows how to find components on the page that depend on a specific path in the data store.

  1. Select the data path that you want to find dependent components for. Press the 'Expose' button:

  1. Now the dependents of this data-path is being exposed - you should see the header at the top of your screen:

image-20201125163049366

  1. You should now see some components highlighted with a green border - these components depend on the demoValue in some way. For example, we can see that this Slider depends on demoValue:
image-20201130110754268
  1. We can also see that the Slider links has it's Value linked to demoValue by hovering over the info icon in the component tree:

image-20201130110928221

Exposing Components that Depend on Another Component​

This example shows how to find components on the page that depend on the selected component.

  1. Select the component that you want to find dependent components for. Press the 'Expose' icon:
image-20201130111250494
  1. Now the dependents of this data-path is being exposed - you should see the header at the top of your screen. In this example we have exposed a Slider component:

image-20201130111333968

  1. You should now see other components highlighted with a green border - these components depend on the Slider in some way. For example, we can see that this Heading component depends on the Slider:

image-20201130111529524

  1. We can also see that the Heading depends on the Slider by hovering over the info icon in the component tree (it's Text links to the Value of the Slider):

image-20201130111646479

What Makes a Component 'Depend' on a Piece of Data?​

A component depends on a piece of data only if:

  • A property of the component links to the data (or to a nested path within the data)

What Makes a Component 'Depend' on Another Component?​

A component depends on another component only if:

  • Both components depend on the same piece of data. For example, if both components have properties that link to the same path in the store, like the Heading and Slider in the above example.